<template>
	<view>
		<block v-if="commentList.length>0">
			<view class="comment" v-for="(item,index) in commentList" :key="item.discussId" @click="goDiscuss(item.discussId)">
				<view class="title">{{item.title}}</view>
				<view class="content">{{item.content}}</view>
				<view class="related">{{item.related}}</view>
				<view class="comment-right">
					<view class="time">{{item.createTime}}</view>
					<view class="num">
						<image class="message" src="/static/course/discuss_icon3.png"></image>
						<view>{{item.discussNum}}</view>
					</view>
				</view>
			</view>
		</block>
		<view v-else class="empty">暂无数据</view>
	</view>
</template>

<script>
	export default {
		props: {
			commentList: {
				type: Array,
				default () {
					return []
				}
			}
		},
		data() {
			return {}
		},
		methods: {
			goDiscuss(discussId) {
				uni.navigateTo({
					url: `/pages/course/discuss?discussId=${discussId}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.comment {
		padding: 40upx 0;
		border-bottom: 2upx solid #dddddd;
	}

	.title {
		font-size: 28upx;
		color: #333333;
		font-weight: bold;
	}

	.content {
		font-size: 28upx;
		color: #333333;
		margin-top: 36upx;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}

	.related {
		font-size: 24upx;
		color: #999999;
		margin-top: 16upx;
	}

	.comment-right {
		display: flex;
		font-size: 24upx;
		color: #999999;
		margin-top: 40upx;
	}

	.time {
		flex: 1;
	}

	.message {
		width: 26upx;
		height: 26upx;
		margin-right: 6upx;
	}

	.num {
		display: flex;
		align-items: center;
	}

	.empty {
		margin-top: 60upx;
		text-align: center;
		font-size: 28upx;
		color: #666666;
	}
</style>
